<template>
	<section style="width:100%">
		<el-tabs v-model="userDefault" type="card" @tab-click="handleClick" style="margin-top: 10px">
			<el-tab-pane label="日注册量统计" name="online">
				<section>
					<el-form :inline="true" :model="filters">
						<el-form-item label="游戏平台">
							<el-select v-model="roomValue" placeholder="请选择">
								<el-option
										v-for="item in room"
										:key="item.value"
										:label="item.label"
										:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="开始时间">
							<el-date-picker
									v-model="value1"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="结束时间">
							<el-date-picker
									v-model="value1"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" v-on:click="getUsers">查询</el-button>
						</el-form-item>
					</el-form>
					<div id="onLine" style="width:100%; height:400px;text-align: center"></div>
					<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%">
						<el-table-column prop="name" label="日期">
						</el-table-column>
						<el-table-column prop="name" label="总注册">
						</el-table-column>
						<el-table-column prop="name" label="IOS">
						</el-table-column>
						<el-table-column prop="name" label="安卓">
						</el-table-column>
						<el-table-column prop="name" label="PC注册">
						</el-table-column>
						<el-table-column prop="name" label="未进房间">
						</el-table-column>
						<el-table-column prop="name" label="所占比例">
						</el-table-column>
					</el-table>
					<el-col :span="24" class="toolbar">
						<el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange" :page-size="15"  :total="total" style="float:right;">
						</el-pagination>
					</el-col>
				</section>
			</el-tab-pane>
			<el-tab-pane label="当日注册" name="dayOnline">
				<section>
					<el-form :inline="true" :model="filters">
						<el-form-item label="开始时间">
							<el-date-picker
									v-model="value1"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="结束时间">
							<el-date-picker
									v-model="value1"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" v-on:click="getUsers">查询</el-button>
						</el-form-item>
					</el-form>
					<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%">
						<el-table-column prop="name" label="游戏主包">
						</el-table-column>
						<el-table-column prop="name" label="总注册">
						</el-table-column>
					</el-table>
				</section>
			</el-tab-pane>
		</el-tabs>

	</section>
</template>

<script>
	import util from '../../common/js/util'
    import echarts from 'echarts'
	//import NProgress from 'nprogress'
	// import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';
    import Page4 from "../nav2/Page4";

	export default {
        components: {Page4},
        data() {
			return {
                editRoomVisible:false,
                roomNameValue:'',
                editRoom:[],
                roomName:[],
                governVisible:false,
                govern:[],
                governValue:'',
                controlVisible:false,
                historyVisible:false,
				filters: {
					name: ''
				},
				users: [],
                userDefault: 'online',
                chartLine: null,
				total: 100,
				page: 1,
				listLoading: false,
				sels: [],//列表选中列
                editableTabs: [
                    {
                    title: 'Tab 1',
                    name: '1',
                    content: 'Tab 1 content'
                }
                ],
				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				editFormRules: {
					name: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
					]
				},
				//编辑界面数据
				editForm: {
					id: 0,
					name: '',
					sex: -1,
					age: 0,
					birth: '',
					addr: ''
				},

				addFormVisible: false,//新增界面是否显示
				addLoading: false,
				addFormRules: {
					name: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
					]
				},
				//新增界面数据
				addForm: {
					name: '',
					sex: -1,
					age: 0,
					birth: '',
					addr: ''
				},
                room: [
                    {
                    value: '1',
                    label: '游戏房间ID'
                }, {
                    value: '2',
                    label: '房间名称'
                }
                ],
                roomValue: '1',
                systemState: [
                    {
                        value: '1',
                        label: '系统吃分'
                    }, {
                        value: '2',
                        label: '系统吐分'
                    }
                ],
                systemValue: '1',
                bunko: [
                    {
                        value: '0',
                        label: '全部'
                    },
                    {
                        value: '1',
                        label: '输'
                    }, {
                        value: '2',
                        label: '赢'
                    }
                ],
                bunkoValue: '0'
			}
		},
		methods: {
            drawOnline() {
                let myChart = document.getElementById(('onLine'));
                myChart.style.width = window.innerWidth - 240 + 'px';
                this.chartLine = echarts.init(myChart);
                let _this = this;
                window.addEventListener("resize", function () {
                    let myChart = document.getElementById(('onLine'));
                    myChart.style.width = window.innerWidth - 240 + 'px';
                    _this.chartLine.resize();
                });
                this.chartLine.setOption({
                    title: {
                        text: '用户注册数据统计'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['总注册','IOS','安卓','PC']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['2月28日', '3月1日', '3月2日', '3月3日', '2月28日', '2月28日', '2月28日','2月28日', '00:30', '01:00', '01:30', '02:00', '02:30', '03:00','2月28日']
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel:{formatter:'{value} 人'}
                    },
                    series: [
                        {
                            name: '总注册',
                            type: 'line',
                            data: [120, 103, 110, 140, 100, 120, 200]
                        },
                        {
                            name:'IOS',
                            type:'line',
                            data:[12, 32, 1, 14, 9, 23, 21]
                        },
                        {
                            name:'安卓',
                            type:'line',
                            data:[20, 12, 10, 13, 90, 20, 10]
                        },{
                            name:'PC',
                            type:'line',
                            data:[50, 60, 41, 34, 10, 60, 70]
                        }
                    ]
                });
                this.chartLine.resize();
            },
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			//获取用户列表
			getUsers() {
				let para = {
					page: this.page,
					name: this.filters.name
				};
				this.listLoading = true;
				//NProgress.start();
				getUserListPage(para).then((res) => {
					this.total = res.data.total;
					this.users = res.data.users;
					this.listLoading = false;
					//NProgress.done();
				});
			},
            handleClick(val){
               if (val.index == '0'){
                   this.drawOnline();
			   }
            }
		},
		mounted() {
			this.getUsers();
            this.drawOnline();
		}
	}

</script>

<style scoped lang="stylus">
</style>